<!--
 * @Author: 晟松
 * @Date: 2021-12-05 16:47:48
 * @LastEditors: 晟松
 * @LastEditTime: 2022-02-27 23:57:15
 * @FilePath: \volunteer-vue3-admin\src\views\communityPages\GroupVol.vue
 * @Description: 居委会自己的大型志愿服务的记录
-->

<template>
    <div>
        <div class="head">
            <!-- <el-row align="middle" justify="start" :gutter="20" class="row">
                <el-col :span="7" class="title">用户名称</el-col>
                <el-col :span="16">
                    <el-input v-model="nameInput" placeholder="请输入用户名称" clearable />
                </el-col>
            </el-row>
            <el-row align="middle" justify="start" :gutter="20" class="row">
                <el-col :span="7" class="title">手机号码</el-col>
                <el-col :span="16">
                    <el-input v-model="phoneInput" placeholder="请输入学生手机号码" clearable />
                </el-col>
            </el-row>-->
            <el-row align="middle" justify="start" :gutter="20" class="row">
                <el-col :span="10" class="title">志愿服务状态</el-col>
                <el-col :span="14">
                    <el-select v-model="groupVolSatate" class="m-2" placeholder="志愿服务状态" size="large" clearable>
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row align="middle" justify="center" :gutter="20" class="row">
                <el-col :span="20">
                    <el-button type="primary" size="small" @click="serach">搜索</el-button>
                    <el-button type="info" size="small" @click="reset">重置</el-button>
                </el-col>
            </el-row>

            <el-row :gutter="10" class="allBtn">
                <el-col :span="1.1">
                    <el-button type="primary" plain icon="plus" size="mini" @click="handleAddGroupVol">新增</el-button>
                </el-col>
                <el-col :span="1.1">
                    <el-button type="danger" plain icon="delete" size="mini" @click="deleteMutiple" :disabled="delDisable">删除</el-button>
                </el-col>
                <!-- <el-col :span="1.1">
                    <el-button type="warning" plain icon="upload" size="mini" @click="handleUpload">导入</el-button>
                </el-col>
                <el-col :span="1.1">
                    <el-button type="warning" plain icon="download" size="mini" @click="handleDownload">导出</el-button>
                </el-col>-->
            </el-row>
        </div>
        <div class="show">
            <el-table :data="data.showList" style="width: 100%" stripe @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column label="id" width="50">
                    <template #default="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <!-- <el-table-column label="发起者">
                    <template #default="scope">{{ scope.row.initiatorUser.userName }}</template>
                </el-table-column>-->
                <el-table-column label="发送学校" width="140">
                    <template #default="scope">
                        <el-tag>{{ scope.row.recipientUser && scope.row.recipientUser.schoolName || '无' }}</el-tag>
                        <el-tag>{{ scope.row.recipientUser && scope.row.recipientUser.college || '无' }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column property="isPublic" label="是否公开发起" align="center" :formatter="publicTrans" />
                <el-table-column property="title" label="标题" align="center" />
                <el-table-column property="event" label="事件" show-overflow-tooltip width="150" align="center" />
                <el-table-column property="time" label="时间" align="center" width="100" />

                <el-table-column property="duration" label="持续时间(单位:小时)" show-overflow-tooltip align="center" width="90" />
                <el-table-column property="place" label="地点" show-overflow-tooltip width="150" align="center" />

                <!-- <el-table-column property="realPeopleNum" label="已领取人数" show-overflow-tooltip align="center" />
                <el-table-column property="peopleNum" label="所需人数" show-overflow-tooltip align="center" />-->

                <el-table-column label="目前人数" align="center">
                    <template
                        #default="scope"
                        :style="{ fontWeight: 'bold' }"
                    >{{ scope.row.realPeopleNum }}/{{ scope.row.peopleNum }}</template>
                </el-table-column>

                <el-table-column prop="state" label="状态" :formatter="stateTrans" align="center" />

                <el-table-column property="createdAt" label="创建时间" width="100" align="center" />
                <el-table-column property="timeIntegral" label="时间积分" align="center" />
                <el-table-column align="center" width="80">
                    <template #header>
                        <!-- <el-input v-model="search" size="small" placeholder="Type to search" /> -->
                        操作
                    </template>
                    <template #default="scope">
                        <!-- 审核一个志愿服务 -->
                        <!-- <el-button
                            type="text"
                            v-if="scope.row.state == enums.state['pendingReview'] || scope.row.state == 1"
                            size="small"
                            icon="select"
                            @click="handleReviewGroupVol(scope.$index, scope.row)"
                        >审核</el-button>-->
                        <el-button type="text" size="small" icon="edit" @click="handleGroupVolDetail(scope.$index, scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="demo-pagination-block" :style="{ float: 'right', marginTop: '10px' }">
                <el-pagination
                    :page-size="limitOffset.limit"
                    :small="false"
                    :disabled="false"
                    :background="true"
                    layout="total, prev, pager, next"
                    :total="data.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                ></el-pagination>
            </div>

            <!-- 查看志愿服务的一些信息 -->
            <el-dialog v-model="groupVolDetailVisible" :title="groupVolDetailTitle" width="80%" top="5.5vh">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card :body-style="{ padding: '10px' }" header="发起者">
                            <user-detail :user="groupVolDetail.initiatorUser"></user-detail>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-form :model="groupVolDetail" :label-position="dialogLablePosition">
                            <el-form-item label="标题" :label-width="formLabelWidth">
                                <el-input v-model="groupVolDetail.title" autocomplete="off" clearable disabled></el-input>
                            </el-form-item>
                            <el-form-item label="图片" :label-width="formLabelWidth">
                                <el-image style :src="groupVolDetail.img" fit="contain"></el-image>
                            </el-form-item>
                            <el-form-item label="事件" :label-width="formLabelWidth">
                                <el-input v-model="groupVolDetail.event" autocomplete="off" clearable disabled type="textarea"></el-input>
                            </el-form-item>
                            <el-form-item label="时间" :label-width="formLabelWidth">
                                <el-input v-model="groupVolDetail.time" autocomplete="off" clearable disabled></el-input>
                            </el-form-item>
                            <el-form-item label="地点" :label-width="formLabelWidth">
                                <el-input v-model="groupVolDetail.place" autocomplete="off" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="实际" :label-width="formLabelWidth">
                                <el-input v-model="groupVolDetail.realPeopleNum" autocomplete="off" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="所需人数" :label-width="formLabelWidth">
                                <el-input v-model="groupVolDetail.peopleNum" autocomplete="off" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="时间积分" :label-width="formLabelWidth">
                                <el-input v-model="groupVolDetail.timeIntegral" autocomplete="off" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="持续时间" :label-width="formLabelWidth">
                                <el-input v-model="groupVolDetail.duration" autocomplete="off" clearable disabled></el-input>
                            </el-form-item>
                            <el-form-item label="特殊要求" :label-width="formLabelWidth">
                                <el-input v-model="groupVolDetail.demand" autocomplete="off" clearable disabled type="textarea"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="审核意见" :label-width="formLabelWidth">
                                <el-input
                                    v-model="groupVolDetail.reviewOpinion"
                                    autocomplete="off"
                                    clearable
                                    type="textarea"
                                    disabled
                                ></el-input>
                            </el-form-item>-->

                            <el-form-item label="反馈" :label-width="formLabelWidth">
                                <el-input v-model="groupVolDetail.feedback" autocomplete="off" clearable disabled></el-input>
                            </el-form-item>
                            <el-form-item label="评价" :label-width="formLabelWidth">
                                <el-input v-model="groupVolDetail.evaluation" autocomplete="off" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="评价分数" :label-width="formLabelWidth">
                                <!-- 这个rate有问题 -->
                                <el-rate
                                    v-model="groupVolDetail.evaluationScore"
                                    show-score
                                    text-color="#ff9900"
                                    score-template="{value} 星"
                                    void-color="#909399"
                                    :colors="['#F7BA2A', '#F7BA2A', '#F7BA2A']"
                                ></el-rate>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="communityReviewGroupVol">确认完成任务</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="3">
                        <div style="height: 400px">
                            <el-steps direction="vertical" :active="handleStateStep(groupVolDetail.state)">
                                <el-step v-for="(item) in enums.stateTransArr" :key="item" :title="item"></el-step>
                            </el-steps>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <el-card :body-style="{ padding: '10px' }" header="对应学校">
                            <!-- 处理一下还没有领取者的情况 -->
                            <user-detail :user="groupVolDetail.recipientUser" v-if="groupVolDetail.recipientUser"></user-detail>
                            <p v-else></p>
                        </el-card>
                        <el-card
                            :body-style="{ padding: '10px' }"
                            header="领取学生"
                            v-for="(stu) in groupVolDetail.recipientStudents"
                            :key="stu.id"
                        >
                            <!-- 处理一下还没有领取者的情况 -->
                            <user-detail :user="stu"></user-detail>
                        </el-card>
                    </el-col>
                </el-row>
                <!-- <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="groupVolDetailVisible = false">取消</el-button>
                        <el-button type="primary" @click="editUser">确认</el-button>
                    </span>
                </template>-->
            </el-dialog>

            <!-- 添加一个志愿服务 -->
            <el-dialog v-model="addGroupVolVisible" :title="addGroupVolTitle" width="80%" top="5.5vh">
                <el-row :gutter="20" justify="space-around">
                    <!-- <el-col :span="6">
                        <el-card :body-style="{ padding: '10px' }" header="发起者">
                            <user-detail :user="addGroupVolDetail.initiatorUser"></user-detail>
                        </el-card>
                    </el-col>-->
                    <el-col :span="10">
                        <el-form :model="addGroupVolDetail" :label-position="dialogLablePosition">
                            <el-form-item label="标题" :label-width="formLabelWidth">
                                <el-input v-model="addGroupVolDetail.title" autocomplete="off" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="图片" :label-width="formLabelWidth">
                                <!-- <el-image style :src="addGroupVolDetail.img" fit="contain"></el-image>
                                -->
                                <el-upload
                                    ref="uploadRef"
                                    class="upload-demo"
                                    drag
                                    accept="image/*"
                                    action="http://localhost:4000/api/upload/file"
                                    :auto-upload="false"
                                    :on-success="uploadedSuccess"
                                    :on-change="uploadFileChange"
                                    :file-list="uploadList"
                                >
                                    <el-icon class="el-icon--upload">
                                        <upload-filled />
                                    </el-icon>
                                    <div class="el-upload__text">
                                        将文件拖入此处，或
                                        <em>点击此处</em>
                                    </div>
                                    <template #tip>
                                        <div class="el-upload__tip">仅允许导入图片格式文件。</div>
                                    </template>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="事件" :label-width="formLabelWidth">
                                <el-input v-model="addGroupVolDetail.event" autocomplete="off" clearable type="textarea"></el-input>
                            </el-form-item>
                            <el-form-item label="时间" :label-width="formLabelWidth">
                                <!-- <el-input v-model="addGroupVolDetail.time" autocomplete="off" clearable></el-input> -->
                                <el-date-picker
                                    v-model="addGroupVolDetail.time"
                                    format="YYYY-MM-DD HH:mm:ss"
                                    type="datetime"
                                    placeholder="请选择服务时间"
                                ></el-date-picker>
                            </el-form-item>
                            <el-form-item label="地点" :label-width="formLabelWidth">
                                <el-input v-model="addGroupVolDetail.place" autocomplete="off" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="时间积分" :label-width="formLabelWidth">
                                <el-input v-model="addGroupVolDetail.timeIntegral" autocomplete="off" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="持续时间" :label-width="formLabelWidth">
                                <el-input v-model="addGroupVolDetail.duration" autocomplete="off" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="大致人数" :label-width="formLabelWidth">
                                <el-input v-model="addGroupVolDetail.peopleNum" autocomplete="off" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="特殊要求" :label-width="formLabelWidth">
                                <el-input v-model="addGroupVolDetail.demand" autocomplete="off" clearable type="textarea"></el-input>
                            </el-form-item>
                            <el-form-item label="公开发送" :label-width="formLabelWidth">
                                <el-switch
                                    v-model="addGroupVolDetail.isPublic"
                                    size="large"
                                    active-text="所有人员都可领取"
                                    inactive-text="选择一个学校的人员进行领取"
                                />
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="12" v-if="addGroupVolDetail.isPublic != true">
                        <!-- <el-row> -->
                        <el-card
                            shadow="hover"
                            v-for="(item, index) in allSchool.allSchoolAdmin"
                            :key="item.id"
                            class="everySchool"
                        >
                            <template #header>
                                <div class="card-header">
                                    <span>{{ item.schoolName }}</span>
                                </div>
                            </template>
                            <el-row align="middle">
                                <el-col :span="3">
                                    <el-avatar shape="square" :size="50" :src="item.avatar"></el-avatar>
                                </el-col>
                                <el-col :span="6">名称：{{ item.userName }}</el-col>
                                <el-col :span="6">手机号：{{ item.phone }}</el-col>
                                <el-col :span="6">
                                    <el-tag class="mx-1" size="large">{{ managementLevelTrans(item.managementLevel) }}</el-tag>
                                </el-col>
                                <el-col :span="2">
                                    <!-- 因为这里只会有一个学校，所以可以这么写 -->
                                    <el-checkbox
                                        v-model="addGroupVolDetailRecipient"
                                        size="large"
                                        border
                                        @change="(value) => addGroupVolDetailRecipientId(value, index)"
                                    ></el-checkbox>
                                </el-col>
                            </el-row>
                            <!-- 剩下的属于自己学校的辅导员这些 -->
                            <!-- <div v-if="item.belongs.length > 0">
                                    <el-row align="middle" v-for="(belong) in item.belongs" :key="belong.id">
                                        <el-col :span="3">
                                            <el-avatar shape="square" :size="50" :src="belong.avatar"></el-avatar>
                                        </el-col>
                                        <el-col :span="6">名称：{{ belong.userName }}</el-col>
                                        <el-col :span="8">手机号：{{ belong.phone }}</el-col>
                                        <el-col :span="6">
                                            <el-tag class="mx-1" size="large" type="success">{{ belong.college }}</el-tag>&nbsp;
                                            <el-tag
                                                class="mx-1"
                                                size="large"
                                                type="warning"
                                            >{{ managementLevelTrans(belong.managementLevel) }}-{{ gradeTrans(belong.grade) }}</el-tag>
                                        </el-col>
                                    </el-row>
                            </div>-->
                        </el-card>
                        <!-- </el-row> -->
                    </el-col>
                </el-row>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="addGroupVolVisible = false">取消</el-button>
                        <el-button type="primary" @click="adminAddGroupVol">确认</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { schoolGetStudentGroupVol, getMineGroupVol, evaluateGroupVol, deleteGroupVol, add } from "@/myApi/groupVol";
import { getAllSchoolInfo } from '@/myApi/user'
import { uploadFile, baseImgUrl } from '@/myApi/upload'
import { getAllSchool, getAllCommunity, create, deleteUser, update, updatePwd } from "@/myApi/user";
import { reactive, ref, computed, onBeforeMount, onMounted, watchEffect } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import enums from "@/utils/enums";
import { ElMessage } from 'element-plus'
import UserDetail from '@/components/UserDetail.vue'
import { isBlank, options } from '@/utils/index'
import upload from "element-plus/es/components/upload/src/ajax";



const store = useStore();
const router = useRouter();
let identity = computed(() => store.getters.identity);
// console.log("identity: ", identity.value);
let userAdmin = computed(() => store.getters.user);

let nameInput = ref("");
let phoneInput = ref("");
let groupVolSatate = ref(undefined);


// 在table中转换一下性别为中文
const genderTrans = (row, column, cellValue, index) => {
    if (cellValue == 'male') {
        return '男'
    } else if (cellValue == 'female') {
        return '女'
    } else {
        return '无'
    }
}
const genderTransNum = (genderNum) => {
    if (genderNum == 1) {
        return '男'
    } else if (genderNum == 4) {
        return '女'
    } else {
        return '未知'
    }
}
// 转换一下年级
const gradeTrans = (row, column, cellValue, index) => {
    let res = ''
    switch (cellValue) {
        case 1: {
            res = '大一'
            break
        }
        case 2: {
            res = '大二'
            break
        } case 3: {
            res = '大三'
            break
        } case 4: {
            res = '大四'
            break
        } case 8: {
            res = '其他'
            break
        }
    }
    return res
}

const managementLevelTrans = (managementLevel) => {
    if (managementLevel == enums.managementLevel.school) return '校级管理员'
    return '院级辅导员'
}

// 转换一下是否是公开发送的
const publicTrans = (row, column, cellValue, index) => {
    if (cellValue == true) return '是'
    return '否'
}

// 将志愿服务的state转为el-step所需的active的位置
const handleStateStep = (state) => {
    return enums.stateArr.indexOf(enums.state[state])
}

// 转换志愿服务状态
const stateTrans = (row, column, cellValue, index) => {
    return enums.stateTrans[cellValue]
}

// 存储所有数据的对象
let data = reactive({ allGroupVolList: [], showList: [], total: 0 });
let limitOffset = reactive({ limit: 10, offset: 0 });
onMounted(async () => {
    await init()
});
/**
 * @description: 初始化table所需的数据
 * @param {*}
 * @return {*}
 */
async function init() {
    // 居委会获得自己发起的志愿服务的所有信息
    data.allGroupVolList = await getMineGroupVol({ id: userAdmin.value.id });

    data.total = data.allGroupVolList.data.length
    console.log("data.allGroupVolList: ", data.allGroupVolList.data);

    data.showList = data.allGroupVolList.data
}

// 搜索按钮的处理
const serach = async () => {
    console.log('serach input ', nameInput.value, phoneInput.value, groupVolSatate.value);
    /**
     * @description: 看一下judged是否在row里存在且匹配，特殊的是，judged为空的时候也是匹配的
     * @param {*} row 原始数据
     * @param {*} judged 需要判断的数据
     * @return {*}
     */
    function judgeState(row, judged) {
        if (isBlank(judged)) return true
        // 只要包含就行
        return row == judged
    }

    // 这里就简单的本地数据查询吧，不想做接口了
    let groupVolList = data.allGroupVolList.data
    let res = []
    for (let i = 0; i < groupVolList.length; i++) {
        let { state } = groupVolList[i]
        console.log('state: ', state);
        // 简单的模拟模糊匹配
        if (judgeState(enums.state[state], groupVolSatate.value || '')) {
            res.push(groupVolList[i])
        }
    }
    data.showList = res

}

const reset = () => {
    nameInput.value = ''
    phoneInput.value = ''
    groupVolSatate.value = undefined
}


const multipleSelection = ref([])
/**
 * @description: 处理多行的多选
 * @param {*} val
 * @return {*}
 */
const handleSelectionChange = (val) => {
    console.log('handleSelectionChange val: ', val);
    multipleSelection.value = val
}


// 根据是否多选了进行判断是否可删除
let delDisable = computed(() => {
    if (multipleSelection.value.length > 0) return false
    else return true
})
// 批量删除大型志愿服务
const deleteMutiple = async () => {
    console.log('deleteMutiple: ', multipleSelection.value);
    // 居委会id
    let id = userAdmin.value.id
    for (let i = 0; i < multipleSelection.value.length; i++) {
        let { id: groupVolId } = multipleSelection.value[i]

        let res = await deleteGroupVol({ id, groupVolId })
        console.log('res: ', res);
    }
    await init()
}




let groupVolDetail = ref({})
let groupVolDetailVisible = ref(false)
let groupVolDetailTitle = ref('详情')
let formLabelWidth = '140px'
let dialogLablePosition = 'left'
let groupVolDetailDisabled = ref(false)
const handleGroupVolDetail = (index, stu) => {
    console.log('handleEdit stu: ', index, stu);
    groupVolDetail.value = stu
    // 针对这个评价星数，可能为null，所以需要处理一下
    groupVolDetail.value.evaluationScore -= 0
    groupVolDetailVisible.value = true
}
/**
 * @description: 居委会评价大型志愿服务，同时也会将这个任务的状态改为已完成
 * @param {*}
 * @return {*}
 */
const communityReviewGroupVol = async () => {
    let { evaluation, evaluationScore } = groupVolDetail.value
    if (isBlank(evaluation)) {
        ElMessage.warning('请写入评价')
        return
    }
    let res = await evaluateGroupVol({
        groupVolId: groupVolDetail.value.id,
        evaluation,
        evaluationScore
    })
    console.log('evaluateGroupVol', res);
}


let addGroupVolDetail = ref({})
let addGroupVolVisible = ref(false)
let addGroupVolTitle = ref('新增')
let addGroupVolDisabled = ref(false)
let addGroupVolDetailRecipient = ref(false)
let allSchool = ref({})
const handleAddGroupVol = async () => {
    addGroupVolDetail.value = {
        "time": "2022-02-26 15:00:00",
        "duration": 8,
        "timeIntegral": 80,
        "place": "天马社区",
        "title": "帮助核酸检测",
        "event": "帮助核酸检测",
        "peopleNum": 3,
        "demand": "最好医学生",
        "img": "http://qiniu.chengsong.info/img/1639368434603.jpg",
        "id": userAdmin.value.id,// 注意这里的id不是本任务的id，而是发起者即居委会的id
        "recipientId": null,
        "isPublic": true,
    }
    addGroupVolVisible.value = true
    console.log('addGroupVolDetail: ', addGroupVolDetail.value);
    // 获取一下所有的学校，然后进行选择
    let res = await getAllSchoolInfo()
    allSchool.value = res.data
    console.log('allSchool: ', allSchool.value);
}
const adminAddGroupVol = async () => {
    console.log('addGroupVolDetail: ', addGroupVolDetail.value);
    let res = await add(addGroupVolDetail.value)
    console.log('res: ', res);
    if (res.data.id) {
        ElMessage.success('发布成功')
        addGroupVolVisible.value = false
        await init()
    }
}
/**
 * @description: 配置一下领取者的id，即学校的id
 * @param {*} index 这是指在allSchool.allSchoolAdmin
 * @return {*}
 */
const addGroupVolDetailRecipientId = (changeVal, index) => {
    if (changeVal) {
        addGroupVolDetail.value.recipientId = allSchool.value.allSchoolAdmin[index].id
    } else {
        addGroupVolDetail.value.recipientId = null
    }
}

let uploadDialogShow = ref(false)
let uploadDialogTitle = ref('批量导入用户')
let uploadList = ref([])
const uploadRef = ref(null)
const handleUpload = () => {
    uploadDialogShow.value = true
}
// 为什么悬着这种上传方式是为了能自己控制上传的方式，使用axios这些携带token进行上传
const uploadFileChange = async (file, List) => {
    console.log('file,List: ', file, List);

    // 注意是formdata的格式，且需要获取原始数据
    let formData = new FormData()
    formData.append('file', file.raw)
    // let res = await fileUpload(formData)

    let res = await uploadFile(formData)
    console.log('uploadFileChange res: ', res);
    if (res.data.key) {
        // 将自动上传的图片返回的url存起来
        addGroupVolDetail.value.img = baseImgUrl + res.data.key

        ElMessage({
            showClose: true,
            message: '导入成功',
            type: 'success',
        })
    }

}
const uploadedSuccess = (res, file, fileList) => {
    console.log('res, file, fileList: ', res, file, fileList);
}




// 分页所需的东西
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
    // let offset = (val - 1) * limitOffset.limit
    // data.showList = data.allGroupVolList.data.pureAllGroupVol.slice(offset, limitOffset.limit + offset)
}

</script >

<style lang="scss" scoped>
.head {
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;
    .allBtn {
        margin: 10px;
    }
    .row {
        margin: 0 10px;
        min-width: 20vw;
        .title {
            font-size: 0.9rem;
            font-weight: bold;
        }
    }
}
.show {
    .optionBtn {
    }
}
</style>
